<template>
    <div class="foot">
        <div class="foot-left">
            <div class="foot-title">
                <span>产品中心</span>
            </div>
            <div class="list">
                <ul>
                    <li v-for="i in 5">>&nbsp;&nbsp;{{ list1.name1[i-1] }}</li>
                </ul>
            </div>
            <div class="list">
                <ul>
                    <li v-for="i in 4">>&nbsp;&nbsp;{{ list1.name2[i-1] }}</li>
                </ul>
            </div>
            <div class="list">
                <ul>
                    <li v-for="i in 4">>&nbsp;&nbsp;{{ list1.name3[i-1] }}</li>
                </ul>
            </div>
        </div>
        <div class="foot-right">
            <div class="foot-title">
                <span>技术研发</span>
            </div>
            <div class="list">
                <ul>
                    <li v-for="i in 4">>&nbsp;&nbsp;{{ list1.name4[i-1] }}</li>
                </ul>
            </div>
        </div>
        <div class="map">
            <div class="foot-title">
                <span>营销网络</span>
            </div>
            <div>
                <img src="../assets/img/10.jpg" alt="" width="90%">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';

    const list1=ref({
        name1:["汽车电机","日用电机","特种电机","大功率电机","电工设备"],
        name2:["工业驱动和自动化","高压变频和系统集成","混泥土搅拌机","电动车辆"],
        name3:["电磁电源","输变电设备","楼盘信息","金融信息"],
        name4:["科技力量","先进设备","研发创新","工艺流程"]
    })
</script>

<style scoped lang="less">
    .foot{
        width: 100%;
        height: 300px;
        float: left;
        background-color: #e5e5e5;
        div{
            float: left;
        }
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .list{
            width: 200px;
            height: 100%;
            padding: 10px 5px;
            li{
                padding: 5px;
            }
        }
        .foot-left{
            width: 54%;
            height: 100%;
            padding: 0 20px;
        }
        .foot-right{
            width: 15%;
            height: 100%;
            padding: 0 20px;
        }
        .foot-title{
                width: 100%;
                border-bottom: 1px solid #303030;
                span{
                    padding: 10px 20px;
                    float: left;
                }
        }
        .map{
            width: 30%;
            height: 100%;
            padding: 0 20px;
        }
    }
</style>